<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<!--<link href="/css/animate.css" rel="stylesheet">-->
	<link rel="stylesheet" type="text/css" href="/static/css/layui.css" th:href="@{/css/layui.css}">
	<link href="/css/layui.css" rel="stylesheet">
	<link href="/css/style.css?v=4.1.0" rel="stylesheet">
	<link type="text/css" href="/static/css/webuploader.css" th:href="@{/css/webuploader.css}" rel="stylesheet">

	<style>
		.aactive {
			color: #13b5b7 !important;
		}
		.hactive:hover{
			color: #13b5b7 !important;
		}
	</style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content " id="app">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div class="layui-row">
						<div class="layui-row" style="text-align: right">
							<label class="col-sm-3 control-label">上传文件：</label>
						</div>
						<div style="display: flex;justify-content: center;margin-bottom: 0px">
							<div id="uploader" class="wu-example">
								<!--用来存放文件信息-->
								<div id="thelist" class="uplouader-list"></div>
								<div class="btns">
									<div id="filePicker">选择文件</div>
									<button type="button" class="layui-btn" id="ctlBtn" style="margin-top: 1%">
										<i class="fa fa-cloud"></i>开始上传
									</button>
								</div>
							</div>
						</div>
					</div>
<!--					<form class="form-horizontal m-t" id="signupForm">-->
<!--						<input type="text" name="url" hidden="hidden" id="filePath" value="" >-->
<!--						<div class="layui-row">-->
<!--							<div class="form-group">-->
<!--								<label class="col-sm-3 control-label">视频封面：</label>-->
<!--								<div class="layui-upload">-->
<!--									<div class="layui-row">-->
<!--										<div class="layui-col-xs3">-->
<!--											<div class="grid-demo grid-demo-bg1">&nbsp;</div>-->
<!--										</div>-->
<!--										<div class="layui-col-xs1">-->
<!--											<div class="grid-demo">-->
<!--												<button type="button" class="layui-btn" id="uploadImg" style="margin-left: 10px;position: relative; top: -13px">上传封面</button>-->
<!--												<input type="text" id="imgUrl" name="imgUrl" value="" hidden="hidden">-->
<!--												<div class="layui-upload-list">-->
<!--													<img class="layui-upload-img" id="faceImg" style="height: 100px;margin-left: 10px">-->
<!--												</div>-->
<!--												<p id="demoText">&nbsp;&nbsp;&nbsp;&nbsp;预览</p>-->
<!--											</div>-->
<!--										</div>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group">-->
<!--							<label class="col-sm-3 control-label">视频栏目：</label>-->
<!--							<div class="col-sm-6">-->
<!--								<input id="channelId" name="channelId" class="hidden">-->
<!--								<input-->
<!--										id="channelName" name="channelName" class="form-control" type="text"-->
<!--										style="cursor: pointer;" onclick="openChannel()"-->
<!--										readonly="readonly" placeholder="视频所属栏目">-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group">-->
<!--							<label class="col-sm-3 control-label">视频名称：</label>-->
<!--							<div class="col-sm-6">-->
<!--								<input id="name" name="name" class="form-control" placeholder="请输入视频名称" type="text">-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group">-->
<!--							<label class="col-sm-3 control-label">视频作者：</label>-->
<!--							<div class="col-sm-6">-->
<!--								<input id="author" name="author" class="form-control" placeholder="请输入视频作者" type="text">-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group">-->
<!--							<label class="col-sm-3 control-label">视频简介：</label>-->
<!--							<div class="col-sm-6">-->
<!--								<textarea name="info" placeholder="请输入内容" class="layui-textarea"></textarea>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group" hidden>-->
<!--							<label class="col-sm-3 control-label">创建时间：</label>-->
<!--							<div class="col-sm-8">-->
<!--								<input id="createTime" name="createTime" class="form-control" type="text">-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group" hidden>-->
<!--							<label class="col-sm-3 control-label">更新时间：</label>-->
<!--							<div class="col-sm-8">-->
<!--								<input id="updataTime" name="updataTime" class="form-control" type="text">-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="form-group">-->
<!--							<div class="col-sm-8 col-sm-offset-3">-->
<!--								<span class="btn btn-primary" onclick="submitVideo()">提交</span>-->
<!--							</div>-->
<!--						</div>-->
<!--					</form>-->
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/bootstrap-paginator.min.js"></script>

<script src="/js/content.js?v=1.0.0"></script>
<script src="/js/layui.js"></script>
<!--<script src="/js/plugins/clipboard/clipboard.min.js"></script>-->
<script src="/js/plugins/layer/layer.min.js"></script>
<!--<div th:include="include::footer"></div>-->
<script type="text/javascript" src="/js/appjs/cms/videoList/add.js"></script>
<script type="text/javascript" src="/static/js/plugins/webuploader.js" th:src="@{/js/plugins/webuploader.js}"></script>
<script type="text/javascript">

	var openChannel = function(){
		layer.open({
			type:2,
			title:"选择视频栏目",
			area : [ '300px', '450px' ],
			content:"/cms/video/channel/treeView"
		})
	}

	function loadChannel (channelId, channelName){
		$("#channelId").val(channelId);
		$("#channelName").val(channelName);
	}

	layui.use('upload', function () {
		var upload = layui.upload;

		//普通图片上传
		var uploadInst = upload.render({
			elem: '#uploadImg'
			, url: '/cms/video/upload'
			,accept:'images'
			,size: 1024
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#faceImg').attr('src', result); //图片链接（base64）
				});
			}
			, done: function (res) {
				//如果上传失败
				if (res.code > 0) {
					return layer.msg('上传失败');
				} else {
					document.getElementById("imgUrl").value = res.imgUrl
				}

			}
			, error: function () {
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function () {
					uploadInst.upload();
				});
			}
		});
	});

	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file)
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file)
		} else if (window.webkitURL != undefined) {
			url = window.webkitURL.createObjectURL(file)
		}
		return url
	}

	//        ----------分割线----------
	var fileArray = [];
	var guid = WebUploader.Base.guid();
	var $list = $("#thelist");
	var $btn = $("#ctlBtn");
	var timer;
	var state = 'pending'; // 上传文件初始化
	var uploaderFlag = -1
	var uploader = WebUploader.create({

		// swf文件路径
		swf:"/js/Uploader.swf",

		// 文件接收服务端。
		server:"/front/submit/saveUpload",

		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#filePicker',

		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false,
		chunked:true,
		duplicate: true,
//         每块文件大小（默认5M）
		chunkSize:5*1024*1024,
		// 开启几个并发线程（默认3个）
		threads:5,
		// 在上传当前文件时，准备好下一个文件
		prepareNextFile:true,
		formData:{"guid":guid}
	});
	// 当有文件被添加进队列的时候
	uploader.on( 'fileQueued', function( file ) {
		uploaderFlag = -1;
		$list.append( '<div id="' + file.id + '" class="item">' +
				'<h4 class="info">' + file.name + '</h4>' +
				'<p class="state">等待上传...</p>' +
				'</div>' );
	});

	//点击上传之前调用的方法
	uploader.on("uploadStart", function (file) {
		var paramOb = {"guid": guid, "filedId": file.source.ruid}
		uploader.options.formData.guid = guid;
		fileArray.push(paramOb);
	});

	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id ),
				$percent = $li.find('.progress .progress-bar');

		// 避免重复创建
		if ( !$percent.length ) {
			$percent = $('<div class="progress progress-striped active">' +
					'<div class="progress-bar" role="progressbar" style="width: 0%">' +
					'</div>' +
					'</div>').appendTo( $li ).find('.progress-bar');
		}
		uploaderFlag = 0;
		$li.find('p.state').text('上传中');
		$percent.css( 'width', percentage * 100 + '%' );
	});


	//文件成功、失败处理
	uploader.on('uploadSuccess', function (file) {
//        var successDuid = file.source.ruid;
		var chunks = file.blocks.length;
		var realFileName = file.name;
		var folder = file.id;
		clearInterval(timer);
		$.post("/front/submit/merge", {"guid": guid,"chunks":chunks,"realFileName":realFileName,"folder":folder}, function (data, status) {
			$( '#'+file.id ).find('p.state').text('合并完成');
			uploaderFlag = 1
			var path = data.msg
			document.getElementById("filePath").value = path
		}).then($('#'+file.id ).find('p.state').text('合并中'));
	});

	uploader.on('uploadError', function (file) {
		$('#' + file.id).find('p.state').text('上传出错');
	});
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress').fadeOut();
	});

	$btn.on('click', function () {
		if (state === 'uploading') {
			uploader.stop();
		} else {
			uploader.upload();
			timer = setInterval(function () {
				var useTime = parseInt($("#useTime").html());
				useTime = useTime + 1;
				$("#useTime").html(useTime);
			}, 1000);
		}
	});

	function submitVideo() {
		var prefix = '/cms/video';
		if (uploaderFlag === 1) {
			$.ajax({
				cache : true,
				type : "POST",
				url : prefix + "/save",
				data : $('#signupForm').serialize(),
				async : false,
				error : function(request) {
					laryer.alert("Connection error");
				},
				success : function(data) {
					if (data.code == 0) {
						parent.layer.msg("保存成功");
						// parent.$('.J_tabCloseAll').click();
						location.reload();
					} else {
						layer.alert('保存失败', {icon: 2})
					}
				}
			});
		} else if (uploaderFlag === 0){
			layer.alert('请等待视频完成上传', {icon: 4});
		} else {
			layer.alert('请上传视频', {icon: 7});
		}
		return false;
	}
</script>
</body>
</html>
